<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />






<meta name="description" content="css中的选择器1. *1234* &amp;#123;  margin: 0;  padding: 0;&amp;#125; *也可以用来选择某元素的所有子元素。 123#container * &amp;#123;  border: 1px solid black;&amp;#125; 它会选中#container下的所有元素。当然，我还是不建议你去使用它，如果可能的话。 2. #X1234#container &amp;#123;">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS选择器">
<meta property="og:url" content="http://yoursite.com/2017/09/07/选择器/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="css中的选择器1. *1234* &amp;#123;  margin: 0;  padding: 0;&amp;#125; *也可以用来选择某元素的所有子元素。 123#container * &amp;#123;  border: 1px solid black;&amp;#125; 它会选中#container下的所有元素。当然，我还是不建议你去使用它，如果可能的话。 2. #X1234#container &amp;#123;">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2017-09-20T07:26:10.465Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS选择器">
<meta name="twitter:description" content="css中的选择器1. *1234* &amp;#123;  margin: 0;  padding: 0;&amp;#125; *也可以用来选择某元素的所有子元素。 123#container * &amp;#123;  border: 1px solid black;&amp;#125; 它会选中#container下的所有元素。当然，我还是不建议你去使用它，如果可能的话。 2. #X1234#container &amp;#123;">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.2',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2017/09/07/选择器/"/>





  <title>CSS选择器 | Hexo</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Hexo</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/07/选择器/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">CSS选择器</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-07T20:53:03+08:00">
                2017-09-07
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="css中的选择器"><a href="#css中的选择器" class="headerlink" title="css中的选择器"></a>css中的选择器</h3><h2 id="1"><a href="#1" class="headerlink" title="1. *"></a>1. *</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">* &#123;</div><div class="line">  margin: <span class="number">0</span>;</div><div class="line">  padding: <span class="number">0</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>*</code>也可以用来选择某元素的所有子元素。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">#container * &#123;</div><div class="line">  border: <span class="number">1</span>px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>它会选中<code>#container</code>下的所有元素。当然，我还是不建议你去使用它，如果可能的话。</p>
<h2 id="2-X"><a href="#2-X" class="headerlink" title="2. #X"></a>2. #X</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">#container &#123;</div><div class="line">   width: 960px;</div><div class="line">   margin: auto;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>在选择器中使用<code>#</code>可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。<br>需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？</p>
<p><code>id</code>选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。</p>
<h2 id="3-X"><a href="#3-X" class="headerlink" title="3. .X"></a>3. .X</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.error &#123;</div><div class="line">  color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这是个<code>class</code>选择器。它跟<code>id</code>选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用<code>class</code>。当你要对某个特定的元素进行修饰那就是用<code>id</code>来定位它。</p>
<a id="more"></a>
<h2 id="4-X-Y"><a href="#4-X-Y" class="headerlink" title="4. X Y"></a>4. X Y</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">li a &#123;</div><div class="line">  text-decoration: none;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的<code>a</code>元素，而只需要定位<code>li</code>标签下的<code>a</code>标签？这时候你就需要使用<code>descendant</code>选择器了。</p>
<h2 id="5-X"><a href="#5-X" class="headerlink" title="5. X"></a>5. X</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">a &#123; color: red; &#125;</div><div class="line">ul &#123; margin-left: 0; &#125;</div></pre></td></tr></table></figure>
<p>定位页面上所有的某标签</p>
<h2 id="6-X-visited-和-X-link"><a href="#6-X-visited-和-X-link" class="headerlink" title="6. X:visited 和 X:link"></a>6. X:visited 和 X:link</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">a:link &#123;color:red;&#125;</div><div class="line">a:visited &#123;color: purple;&#125;</div></pre></td></tr></table></figure>
<p>我们使用<code>:link</code>这个伪类来定位所有还没有被访问过的链接。<br>另外，我们也使用<code>:visited</code>来定位所有已经被访问过的链接。</p>
<h2 id="7-X-Y"><a href="#7-X-Y" class="headerlink" title="7. X+Y"></a>7. X+Y</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul + p &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有<code>ul</code>标签后面的第一段，并将它们的颜色都设置为红色。</p>
<h2 id="8-X-gt-Y"><a href="#8-X-gt-Y" class="headerlink" title="8. X&gt;Y"></a>8. X&gt;Y</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div#container &gt; ul &#123;</div><div class="line">  border: 1px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>X Y</code>和<code>X &gt; Y</code>的差别就是后面这个指挥选择它的直接子元素。看下面的例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">&lt;div id=&quot;container&quot;&gt;</div><div class="line">   &lt;ul&gt;</div><div class="line">      &lt;li&gt; List Item</div><div class="line">        &lt;ul&gt;</div><div class="line">           &lt;li&gt; Child &lt;/li&gt;</div><div class="line">        &lt;/ul&gt;</div><div class="line">      &lt;/li&gt;</div><div class="line">      &lt;li&gt; List Item &lt;/li&gt;</div><div class="line">      &lt;li&gt; List Item &lt;/li&gt;</div><div class="line">      &lt;li&gt; List Item &lt;/li&gt;</div><div class="line">   &lt;/ul&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<p><code>#container &gt; ul</code>只会选中<code>id</code>为container的<code>div</code>下的所有直接<code>ul</code>元素。它不会定位到如第一个<code>li</code>下的<code>ul</code>元素。</p>
<h2 id="9-X-Y"><a href="#9-X-Y" class="headerlink" title="9. X ~ Y"></a>9. X ~ Y</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul ~ p &#123;</div><div class="line">  color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>兄弟节点组合选择器跟<code>X+Y</code>很相似，然后它又不是那么的严格。<code>ul + p</code>选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择目标元素后代中的所有匹配的元素。</p>
<h2 id="10-X-title"><a href="#10-X-title" class="headerlink" title="10. X[title]"></a>10. X[title]</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">a[title] &#123;</div><div class="line">  color: green;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。</p>
<h2 id="11-X-href-”foo”"><a href="#11-X-href-”foo”" class="headerlink" title="11. X[href=”foo”]"></a>11. X[href=”foo”]</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">a[href=&quot;http://strongme.cn&quot;] &#123;</div><div class="line">  color: green; </div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>上面这片代码将会把<code>href</code>属性值为<code>http://strongme.cn</code>的锚点标签设置为绿色，而其他标签则不受影响。</p>
<p>注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话，尽量使用标准的CSS3选择器。</p>
<p>这样可以用了，但是还是有点死，如果不是这个链接，而是类似的链接，那么这时就得用正则表达式了。</p>
<h2 id="12-X-href-”strongme”"><a href="#12-X-href-”strongme”" class="headerlink" title="12. X[href*=”strongme”]"></a>12. X[href*=”strongme”]</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">a[href*=&quot;strongme&quot;] &#123;</div><div class="line">  color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这样，就指定了<code>strongme</code>这个值必须出现在锚点标签的<code>href</code>属性中（包含其中就可以），不管是<code>strongme.cn</code>还是<code>strongme.com</code>还是<code>www.strongme.cn</code>都可以被选中。<br>但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是<code>strongme</code>相关的站点，如果要更加具体的限制的话，那就使用<code>^</code>和<code>$</code>，分别表示字符串的开始和结束。</p>
<h2 id="13-X-href-”href”"><a href="#13-X-href-”href”" class="headerlink" title="13. X[href^=”href”]"></a>13. X[href^=”href”]</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">a[href^=&quot;http&quot;] &#123;</div><div class="line">   background: url(path/to/external/icon.png) no-repeat;</div><div class="line">   padding-left: 10px;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性<code>href</code>中以<code>http</code>开头的标签，那我们就可以用与上面相似的代码。</p>
<h2 id="14-X-href-”-jpg”"><a href="#14-X-href-”-jpg”" class="headerlink" title="14. X[href$=”.jpg”]"></a>14. X[href$=”.jpg”]</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">a[href$=&quot;.jpg&quot;] &#123;</div><div class="line">  color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这次我们又使用了正则表达式<code>$</code>，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以<code>.jpg</code>结尾的。但是记住这种写法是不会对<code>gifs</code>和<code>pngs</code>起作用的。</p>
<h2 id="15-X-data-”foo”"><a href="#15-X-data-”foo”" class="headerlink" title="15. X[data-*=”foo”]"></a>15. X[data-*=”foo”]</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">a[data-filetype=&quot;image&quot;] &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>在回到第8条，我们如何把所有的图片类型都选中呢 <code>png</code>, <code>jpeg</code>, jpg , gif ？我们可以使用多选择器。看下面：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">a[href$=&quot;.jpg&quot;],</div><div class="line">a[href$=&quot;.jpeg&quot;],</div><div class="line">a[href$=&quot;.png&quot;],</div><div class="line">a[href$=&quot;.gif&quot;] &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性<code>data-filetype</code>指定这个链接指向的图片类型。如果是图片那么指定其的值为image </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">a[data-filetype=&quot;image&quot;] &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="16-X-foo-”bar”"><a href="#16-X-foo-”bar”" class="headerlink" title="16. X[foo~=”bar”]"></a>16. X[foo~=”bar”]</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">a[data-info~=&quot;external&quot;] &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div><div class="line"></div><div class="line">a[data-info~=&quot;image&quot;] &#123;</div><div class="line">   border: 1px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个<code>~</code>符号可以定位那些某属性值是空格分隔多值的标签。<br>继续使用第15条那个例子，我们可以设置一个<code>data-info</code>属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;a href=&quot;path/to/image.jpg&quot; data-info=&quot;external image&quot;&gt; Click Me, Fool &lt;/a&gt;</div></pre></td></tr></table></figure>
<p>给这些元素设置了这个标志之后，我们就可以使用<code>~</code>来定位这些标签了。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">a[data-info~=&quot;external&quot;] &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div><div class="line"></div><div class="line">a[data-info~=&quot;image&quot;] &#123;</div><div class="line">  border: 1px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="17-X-checked"><a href="#17-X-checked" class="headerlink" title="17. X:checked"></a>17. X:checked</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">input[type=radio]:checked &#123;</div><div class="line">   border: 1px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。</p>
<h2 id="18-X-after"><a href="#18-X-after" class="headerlink" title="18. X:after"></a>18. X:after</h2><p><code>before</code>和<code>after</code>这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。<br>当使用<code>.clearfix</code>技巧时许多属性都是第一次被使用到里面的。就以清除浮动为例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">.clearfix:after &#123;</div><div class="line">  content: &quot;.&quot;;</div><div class="line">  display: block;</div><div class="line">  height: 0;</div><div class="line">  clear: both;</div><div class="line">  visibility: hidden;</div><div class="line">&#125;</div><div class="line"></div><div class="line">.clearfix &#123;</div><div class="line">  zoom: 1;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="19-X-hover"><a href="#19-X-hover" class="headerlink" title="19. X::hover"></a>19. X::hover</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div:hover &#123;</div><div class="line">  background: #e3e3e3;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>不用说，大家肯定知道它。如果想在用户鼠标飘过的地方添加样式，那这个伪类写法可以办到。</p>
<p>注意旧版本的IE只会对加在锚点<code>a</code>标签上的<code>:hover</code>伪类起作用。</p>
<p>通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">a:hover &#123;</div><div class="line"> border-bottom: 1px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="20-X-not-selector"><a href="#20-X-not-selector" class="headerlink" title="20. X:not(selector)"></a>20. X:not(selector)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div:not(#container) &#123;</div><div class="line">   color: blue;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>取反</code>伪类是相当有用的，假设我们要把除<code>id</code>为<code>container</code>之外的所有<code>div</code>标签都选中。那上面那么代码就可以做到。</p>
<p>或者说我想选中所有除了段落标签之外的所有标签。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">*:not(p) &#123;</div><div class="line">  color: green;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="21-X-pseudoElement-CSS-伪元素"><a href="#21-X-pseudoElement-CSS-伪元素" class="headerlink" title="21. X::pseudoElement   CSS 伪元素"></a>21. X::pseudoElement   CSS 伪元素</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">p::first-line &#123;</div><div class="line">  font-weight: bold;</div><div class="line">  font-size:1.2em;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>我们可以使用<code>::</code>来选中某标签的部分内容，如地一段，或者是第一个字没有。但是记得必须使用在块式标签上才起作用。</p>
<p>伪标签是由两个冒号 :: 组成的。</p>
<p><strong>定位第一个字</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">p::first-letter &#123;</div><div class="line">   font-size: 20px;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。</p>
<p>它通常在一些新闻报刊内容的重点突出会使用到。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">p::first-line &#123;</div><div class="line">   font-weight: bold;</div><div class="line">   font-size: 1.2em;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>选中段落的第一行 。</p>
<p>为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如<code>:first-line</code>,<code>:first-letter</code>,<code>:before</code>,<code>:after</code>.但是这个兼容对新介绍的特性不起作用。</p>
<h2 id="22-X-nth-child-n"><a href="#22-X-nth-child-n" class="headerlink" title="22. X:nth-child(n)"></a>22. X:nth-child(n)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">li:nth-child(3) &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>请注意<code>nth-child</code>接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是<code>li:nth-child(2)</code>.</p>
<p>我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用<code>li:nth-child(4n)</code>去每隔3个元素获取一次标签(及获取排行是4的倍数的标签)。</p>
<h2 id="23-X-nth-last-child-n"><a href="#23-X-nth-last-child-n" class="headerlink" title="23. X:nth-last-child(n)"></a>23. X:nth-last-child(n)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">li:nth-last-child(2) &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>假设你在一个<code>ul</code>标签中有N多的元素，而你只想获取最后三个元素，你可以用里<code>li:nth-last-child(-n+3)</code>伪类去代替它。</p>
<h2 id="24-X-nth-of-type-n"><a href="#24-X-nth-of-type-n" class="headerlink" title="24. X:nth-of-type(n)"></a>24. X:nth-of-type(n)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul:nth-of-type(3) &#123;</div><div class="line">   border: 1px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>想根据元素的类型来进行选择。</p>
<p>想象一下有5个<code>ul</code>标签。如果你只想对其中的第三个进行修饰，而且你也不想使用<code>id</code>属性，那你就可以使用<code>nth-of-type(n)</code>伪类来实现了，上面的那个代码，只有第三个<code>ul</code>标签会被设置边框。</p>
<h2 id="25-X-nth-last-of-type-n"><a href="#25-X-nth-last-of-type-n" class="headerlink" title="25. X:nth-last-of-type(n)"></a>25. X:nth-last-of-type(n)</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul:nth-last-of-type(3) &#123;</div><div class="line">   border: 1px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>同样，也可以类似的使用<code>nth-last-of-type</code>来倒序的获取标签。</p>
<h2 id="26-X-first-child"><a href="#26-X-first-child" class="headerlink" title="26. X:first-child"></a>26. X:first-child</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul li:first-child &#123;</div><div class="line">   border-top: none;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。如果第一个标签<code>li</code>的标签 那么会失效</p>
<p>假设有个列表，没个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。</p>
<h2 id="27-X-last-child"><a href="#27-X-last-child" class="headerlink" title="27. X:last-child"></a>27. X:last-child</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul &gt; li:last-child &#123;</div><div class="line">   color: green;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>跟<code>first-child</code>相反，<code>last-child</code>取的是父标签的最后一个子标签。</p>
<h2 id="28-X-only-child"><a href="#28-X-only-child" class="headerlink" title="28. X:only-child"></a>28. X:only-child</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">div p:only-child &#123;</div><div class="line">   color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>它允许你获取到那些只有一个子标签的父标签。就像上面那段代码，只有一个段落标签的<code>div</code>才被着色。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&lt;div&gt;&lt;p&gt; My paragraph here. &lt;/p&gt;&lt;/div&gt;</div><div class="line"></div><div class="line">&lt;div&gt;</div><div class="line">   &lt;p&gt; Two paragraphs total. &lt;/p&gt;</div><div class="line">   &lt;p&gt; Two paragraphs total. &lt;/p&gt;</div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<p>上面例子中，第二个<code>div</code>不会被选中。一旦第一个<code>div</code>有了多个子段落，那这个就不再起作用了。</p>
<h2 id="29-X-only-of-type"><a href="#29-X-only-of-type" class="headerlink" title="29. X:only-of-type"></a>29. X:only-of-type</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">li:only-of-type &#123;</div><div class="line">   font-weight: bold;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的<code>ul</code>标签？</p>
<p>使用<code>ul li</code>会选中所有<code>li</code>标签。这时候就要使用<code>only-of-type</code>了,这样 就选中了这个<code>li</code> 标签。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul &gt; li:only-of-type &#123;</div><div class="line">   font-weight: bold;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>##30. X:first-of-type </p>
<ul>
<li><code>first-of-type</code>伪类可以选择指定标签的第一个兄弟标签。</li>
</ul>
<p><strong>测试</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">&lt;div&gt;</div><div class="line">   &lt;p&gt; My paragraph here. &lt;/p&gt;</div><div class="line">   &lt;ul&gt;</div><div class="line">      &lt;li&gt; List Item 1 &lt;/li&gt;</div><div class="line">      &lt;li&gt; List Item 2 &lt;/li&gt;</div><div class="line">   &lt;/ul&gt;</div><div class="line"></div><div class="line">   &lt;ul&gt;</div><div class="line">      &lt;li&gt; List Item 3 &lt;/li&gt;</div><div class="line">      &lt;li&gt; List Item 4 &lt;/li&gt;</div><div class="line">   &lt;/ul&gt;   </div><div class="line">&lt;/div&gt;</div></pre></td></tr></table></figure>
<p>来你把List Item 2取出来，如果你已经取出来或者是放弃了，来继续。</p>
<p>解决办法1<br>办法很多，我们看一些比较方便的。首先是<code>first-of-type</code>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul:first-of-type &gt; li:nth-child(2) &#123;</div><div class="line">   font-weight: bold;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>找到第一个<code>ul</code>标签，然后找到直接子标签<code>li</code>，然后找到第二个子节点。<br><strong>解决办法2</strong><br>另一个解决办法就是邻近选择器。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">p + ul li:last-child &#123;</div><div class="line">   font-weight: bold;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这种情况下，找到<code>p</code>下的直接<code>ul</code>标签，然后找到它的最后一个直接子标签。</p>
<p><strong>解决办法3</strong><br>我们可以随便玩耍这些选择器。来看看：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">ul:first-of-type li:nth-last-child(1) &#123;</div><div class="line">   font-weight: bold;   </div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>先获取到页面上第一个<code>ul</code>标签，然后找到最后一个子标签。</p>
<h2 id="什么是伪元素"><a href="#什么是伪元素" class="headerlink" title="什么是伪元素"></a>什么是伪元素</h2><p><strong>解释：</strong>伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。</p>
<p>伪元素实际上在CSS1中就存在了，但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active等）</p>
<p><strong>伪元素有：</strong> :first-line，:first-letter，:before，:after</p>
<h2 id="css3新增的选择器"><a href="#css3新增的选择器" class="headerlink" title="css3新增的选择器"></a>css3新增的选择器</h2><h3 id="1-属性选择器"><a href="#1-属性选择器" class="headerlink" title="1.属性选择器"></a>1.属性选择器</h3><p><code>E[att]</code>                选择具有att属性的E元素</p>
<p><code>E[att=&quot;val&quot;]</code>    选择具有att属性且属性值等于val的E元素</p>
<p><code>E[att~=&quot;val&quot;]</code>        选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E的元素， 包含一个值且等于val的情况</p>
<p><code>E[att^=&quot;val&quot;]</code>        选择具有att属性且属性值为以val开头的字符串的E元素</p>
<p><code>E[att$=&quot;val&quot;]</code>        选择具有att属性且属性值为以val结尾的字符串的E元素</p>
<p><code>E[att*=&quot;val&quot;]</code>        选择具有att属性且属性值为包含val的字符串的E元素</p>
<p><code>E[att|=&quot;val&quot;]</code>        选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择。</p>
<h3 id="2-伪类选择器"><a href="#2-伪类选择器" class="headerlink" title="2.伪类选择器"></a>2.伪类选择器</h3><p><code>E:first-child</code>            选择第一个E元素    E必须是某个元素的第一个子元素才生效</p>
<p><code>E:last-child</code>              选择最后一E元素</p>
<p><code>E:nth-child(n)</code>             选择第几个E元素    从1开始数  不是从0</p>
<p><code>E:nth-last-child(n)</code> 从后面数选择第一个E元素</p>
<p><code>E:nth-child(7n)</code>         选择7的倍数的E元素</p>
<p><code>E:nth-last-child(-n+3)</code>  选择前三个E元素</p>
<p><code>li:first-of-type</code>       选择某元素下的第一个为li的子元素</p>
<p><code>li:last-of-type</code>         选择某元素下的最后一个为li的子元素</p>
<p><code>E:empty</code>                空选择器  E元素内一个节点都没有</p>
<p><code>E:target</code>             目标选择器   被连接的元素</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">h3:target&#123;</div><div class="line">  background-color: yellow;</div><div class="line">&#125;</div><div class="line">&lt;h3 id=&quot;title1&quot;&gt;如何变得更纯洁&lt;/h3&gt;</div></pre></td></tr></table></figure>
<p><code>E:not(选择器)</code>              除了这个元素以外的其他元素     例如E:not(.btn);       </p>
<h3 id="3-伪对象（元素）选择器"><a href="#3-伪对象（元素）选择器" class="headerlink" title="3.伪对象（元素）选择器"></a>3.伪对象（元素）选择器</h3><p><code>E::first-letter</code>         第一个字符    可以使用 单<code>:</code></p>
<p><code>E::first-line</code>            第一行    可以使用 单<code>:</code></p>
<p><code>E::selection</code>         选中的内容</p>
<p><code>E:before，E:after</code> {</p>
<hr>
<ul>
<li><p>在什么之前  和  什么之后</p>
</li>
<li><p>对E元素里面进行创建  相当于一个在子元素前面 一个在后面</p>
</li>
</ul>
<hr>
<p>content:””;</p>
<p>display:block;</p>
<ul>
<li>这两个必须写</li>
</ul>
<p>}    </p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/09/02/递归/" rel="next" title="递归">
                <i class="fa fa-chevron-left"></i> 递归
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/09/13/canvas/" rel="prev" title="canvas">
                canvas <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg"
               alt="shine-wl" />
          <p class="site-author-name" itemprop="name">shine-wl</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
            
              <a href="/archives/">
            
                <span class="site-state-item-count">21</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            
            
            <div class="site-state-item site-state-tags">
              
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">标签</span>
              
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#css中的选择器"><span class="nav-number">1.</span> <span class="nav-text">css中的选择器</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1"><span class="nav-number"></span> <span class="nav-text">1. *</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-X"><span class="nav-number"></span> <span class="nav-text">2. #X</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-X"><span class="nav-number"></span> <span class="nav-text">3. .X</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-X-Y"><span class="nav-number"></span> <span class="nav-text">4. X Y</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-X"><span class="nav-number"></span> <span class="nav-text">5. X</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-X-visited-和-X-link"><span class="nav-number"></span> <span class="nav-text">6. X:visited 和 X:link</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-X-Y"><span class="nav-number"></span> <span class="nav-text">7. X+Y</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-X-gt-Y"><span class="nav-number"></span> <span class="nav-text">8. X>Y</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-X-Y"><span class="nav-number"></span> <span class="nav-text">9. X ~ Y</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-X-title"><span class="nav-number"></span> <span class="nav-text">10. X[title]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-X-href-”foo”"><span class="nav-number"></span> <span class="nav-text">11. X[href=”foo”]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#12-X-href-”strongme”"><span class="nav-number"></span> <span class="nav-text">12. X[href*=”strongme”]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#13-X-href-”href”"><span class="nav-number"></span> <span class="nav-text">13. X[href^=”href”]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-X-href-”-jpg”"><span class="nav-number"></span> <span class="nav-text">14. X[href$=”.jpg”]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-X-data-”foo”"><span class="nav-number"></span> <span class="nav-text">15. X[data-*=”foo”]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#16-X-foo-”bar”"><span class="nav-number"></span> <span class="nav-text">16. X[foo~=”bar”]</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#17-X-checked"><span class="nav-number"></span> <span class="nav-text">17. X:checked</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18-X-after"><span class="nav-number"></span> <span class="nav-text">18. X:after</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#19-X-hover"><span class="nav-number"></span> <span class="nav-text">19. X::hover</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20-X-not-selector"><span class="nav-number"></span> <span class="nav-text">20. X:not(selector)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#21-X-pseudoElement-CSS-伪元素"><span class="nav-number"></span> <span class="nav-text">21. X::pseudoElement   CSS 伪元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#22-X-nth-child-n"><span class="nav-number"></span> <span class="nav-text">22. X:nth-child(n)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#23-X-nth-last-child-n"><span class="nav-number"></span> <span class="nav-text">23. X:nth-last-child(n)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#24-X-nth-of-type-n"><span class="nav-number"></span> <span class="nav-text">24. X:nth-of-type(n)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#25-X-nth-last-of-type-n"><span class="nav-number"></span> <span class="nav-text">25. X:nth-last-of-type(n)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#26-X-first-child"><span class="nav-number"></span> <span class="nav-text">26. X:first-child</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#27-X-last-child"><span class="nav-number"></span> <span class="nav-text">27. X:last-child</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#28-X-only-child"><span class="nav-number"></span> <span class="nav-text">28. X:only-child</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#29-X-only-of-type"><span class="nav-number"></span> <span class="nav-text">29. X:only-of-type</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是伪元素"><span class="nav-number"></span> <span class="nav-text">什么是伪元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css3新增的选择器"><span class="nav-number"></span> <span class="nav-text">css3新增的选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-属性选择器"><span class="nav-number">1.</span> <span class="nav-text">1.属性选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-伪类选择器"><span class="nav-number">2.</span> <span class="nav-text">2.伪类选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-伪对象（元素）选择器"><span class="nav-number">3.</span> <span class="nav-text">3.伪对象（元素）选择器</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">shine-wl</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动</div>

  <span class="post-meta-divider">|</span>

  <div class="theme-info">主题 &mdash; <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.2</div>


        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  








  





  

  

  

  

  

  

</body>
</html>
